<html>
  <head>
    <style>
      select {
        font-size: 40pt
      }
      div, a {
        font-size: 40pt;
      }
    </style>
    <title>TestSelect</title>
  </head>
  <body>
    <h1>Single select without group headers</h1>
    <div>
      <select>
        <option>first</option>
        <option selected>second</option>
        <option>third</option>
        <option>fourth</option>
      </select>
    </div>
    <h1>Single select with group headers</h1>
    <div>
      <select>
        <optgroup label="Swedish Cars">
          <option value="volvo">Volvo</option>
          <option value="saab" disabled>Saab</option>
        </optgroup>
        <option>bicycle</option>
        <optgroup label="German Cars">
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
        </optgroup>
      </select> 
    </div>
    <h1>Multi select without group</h1>
    <div>
      <select multiple>
        <option>apple</option>
        <option selected>orange</option>
        <option disabled>pear</option>
        <option selected>pineapple</option>
        <option>kiwi</option>
      </select>
    </div>
    <h1>Multi select with group</h1>
    <div>
      <select multiple>
        <optgroup label="stars" disabled>
          <option>orion</option>
          <option selected>sun</option>
        </optgroup>
        <option>moon</option>
        <optgroup label="planets">
          <option>mars</option>
          <option selected>venus</option>
          <option>mercury</option>
        </optgroup>
      </select>
    </div>
  </body>
</html>
